<style>
.tab-survey-single {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 99999;
}

.survey-wrapper {
    position: relative;
    max-width: 70%;
    margin-top: 27px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
    background-color: #c5d0d0;
    z-index: 9999;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.survey-header {
    position: relative;
    width: 100%;
    height: 85px;
    background: #ffffff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

#icon-survey {
    float: left;
    margin-left: 40px;
    margin-top: 3px;
}

.survey-header-info{
    float: left;
    margin-left: 10px;
}

.do-survey-thread {
    display: block;
    margin-top: 15px;
    font-family: Myriad;
    font-size: 25px;
    color: #0ba8cf;
    text-transform: uppercase;
    line-height: 1.2;
}

.do-survey-title {
    display: block;
    font-family: Arial;
    font-size: 16px;
}

.close-icon {
    position: absolute;
    top: 35px;
    right: 40px;
    width: 12px;
    height: 100%;
    font-size: 17px;
    cursor: pointer;
    color: #ccc;
}

.close-icon:hover {
    color: #c0392b;
}

.survey-content {
    font-family: Arial;
    font-size: 16px;
    width: 100%;
    height: 500px;
    overflow-y: auto;
}

.survey-content::-webkit-scrollbar {
    display: none;
}

.survey-content-item {
    margin-top: 35px;
    padding: 0 40px 15px 40px;
    height: 400px;
}

.question-box {
    display: none;
    background: #fff;
    margin-bottom: 10px;
    padding: 33px 35px;
    font-size: 0.8em;
    position: relative;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: 'opacity' 0.2s linear;
    -moz-transition: 'opacity' 0.2s linear;
    -o-transition: 'opacity' 0.2s linear;
    transition: 'opacity' 0.2s linear;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    overflow-y: hidden;
    min-height: 250px;
    overflow-x: hidden;
}

.question-box:hover {
    opacity: 1 !important;
}

.question-box h1 {
    font-family: Arial;
    font-size: 1.6em;
    line-height: 29px;
    font-weight: 500;
}

.question-box h3 {
    font-family: Arial;
    font-size: 1.43em;
    line-height: 26px;
    margin: -3px 0 0 0;
    color: #2a3535;
    font-weight: 500;
    padding-bottom: 0;
}

.question-box .question-text {
    float: left;
    width: 47%;
}

.question-answer {
    width: 47%;
    float: right;
    margin-top: 5px;
}

.question-box.answered {
    opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    filter: alpha(opacity=50);
}

.question-box.answers{
    display: block;
}

.question-box .question-answer ul.radiolist {
    list-style: none;
    padding: 0;
    margin: -5px 0 0 0;
    margin-top: -11px;
}

.question-box .question-answer ul.radiolist.disabled li.selected .radio{
    display: block;
}

.question-box .question-answer ul.radiolist.disabled li .radio {
    background-color: #35bdcf;
    display: none;
}

.question-box .question-answer ul.radiolist li.first {
    border-color: transparent;
}

.question-box .question-answer ul.radiolist li {
    line-height: 1.75em;
    margin: -1px 0 0 0;
    padding: 8px 50px 9px 40px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-top: 1px dashed #c2cdcd;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.urp_content * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}

.question-box .question-answer ul.radiolist li .radio {
    background: #96a6a6;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

.question-box .question-answer ul.radiolist li .overlay, .question-box .question-answer ul.radiolist li .bar {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #35bdcf;
    z-index: 1;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
}

.question-box .question-answer ul.radiolist.showresults .result {
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity = 100);
}

.question-box .question-answer ul.radiolist.showresults .bar {
    opacity: 0.12;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=12);
    filter: alpha(opacity = 12);
}

.question-box .question-answer ul.radiolist li .result {
    font-weight: 600;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -12px;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

.question-box .radiolist.enabled li:hover {
    background: #E7F7F9;
}

.question-box .radiolist .skip {
    color: #f14c4c;
}

.question-box .radiolist.enabled .skip:hover {
    background: #FDEAEA;
}

.question-box label {
    cursor: pointer;
}

.question-box li input[type="checkbox"] {
    position: absolute;
    top: 10px;
    left: 15px;
    height: 15px;
    width: 15px;
    padding-right: 20px;
    outline: none;
}

.question-box table input[type="checkbox"], .question-box table input[type="radio"] {
    height: 20px;
    width: 15px;
    outline: none;
    position: absolute;
    top: 15px;
    left: 40%;
    margin: auto;
}

.question-box .buttons {
    width: 100%;
    margin-top: 20px;
}

.question-box .buttons input[type="button"] {
    font-family: Arial;
    font-size: 16px;
    width: 120px;
    padding: 10px 16px;
    background: #35bdcf;
    margin-left: 15px;
}

.question-box .buttons input[type="button"]:hover {
    background: #289aa9;
}

.question-box .button-skip {
    color: #f14c4c;
    cursor: pointer;
    padding: 8px 40px;
    border: 1px dashed #c2cdcd;
}

.question-box.answered .button-skip {
    opacity: 0.5;
}

.question-box .button-skip:hover {
    border-color: #f14c4c;
}

.question-box .question-answer ul.radiolist.disabled li {
    cursor: default;
}

.question-box .question-answer ul.radiolist.disabled li.skip {
    color: #889696;
}

.question-box .val-message.error {
    color: #980c0c;
}

.question-box .val-message.show {
    height: auto;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity = 100);
    display: block;
}

.question-box .val-message {
    width: 100%;
    overflow: hidden;
    color: #889696;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity = 0);
    display: none;
    height: 0;
    padding-top: 10px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

.urp_content * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}

.answer-table {
    font-family: Arial;
    -webkit-font-smoothing: antialiased;
    overflow: auto;
    border-spacing: 0;
    width: 100%;
    margin-top: 5px;
}

table {
    border-collapse: collapse;
}

.answer-table th {
    background-color: #ecf0f1;
    font-weight: normal;
    padding: 15px 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.answer-table td {
    position: relative;
    border: 1px solid #eee;
    padding: 15px 10px;
    color: rgb(111, 111, 111);
}

.question-box.answered .btn{
    opacity: 0.5;
}

.table-survey-button input{
    margin-right: 10px;
}

.table-survey-button input, .table-survey-button a{
    float: right;
}

.question-answer .selected .bar{
    background: #35bdcf;
    opacity: 0.12 !important;
}

.question-answered-time{
    padding: 0;
    color: #C5D0D0;
    font-style: italic;
}

</style>
<div class="survey-wrapper" style="display: none" scid="<?php echo $scid; ?>">
    <div class="survey-header">
        <div id="icon-survey" class="<?php echo $icon_survey; ?>"></div>
        <div class="survey-header-info">
            <label class="do-survey-thread"><?php echo $survey_title; ?></label>
            <label class="do-survey-title"><i class="fa fa-angle-right"></i> <?php echo $survey_child_title; ?></label>
        </div>
        <div class="close-icon" onclick="closeSurvey(this);"><i class="fa fa-times"></i></div>
    </div>
    <div class="survey-content">
        <div class="survey-content-item">

            <!--<div class="question-box">
                <h1>Khảo sát hoàn tất</h1>
                <h3>Cảm ơn bạn vì đã làm bài thăm dò này.</h3>
                <div class="buttons">
                    <input style="position: absolute; right: 40px" onclick="closeSurvey(this);" type="button" class="btn" value="Đóng">
                </div>
            </div>-->

            <!--<div class="question-box">
                <h3>Bạn có thường xuyên sử dụng những sản phẩm dưới đây không?</h3>
                <table class="answer-table">
                    <tbody>
                    <tr>
                        <th>Vài lần 1 ngày</th>
                        <th>1 lần 1 ngày</th>
                        <th>Vài lần 1 tuần</th>
                        <th>1 lần 1 tuần</th>
                        <th>2-3 lần 1 tháng</th>
                        <th>1 lần 1 tháng</th>
                        <th>Ít hơn 1 lần 1 tháng</th>
                    </tr>
                    <tr>
                        <td>Chỉ nha khoa</td>
                        <td>
                            <input name="answer-1" type="radio">
                        </td>
                        <td>
                            <input name="answer-1" type="radio">
                        </td>
                        <td>
                            <input name="answer-1" type="radio">
                        </td>
                        <td>
                            <input name="answer-1" type="radio">
                        </td>
                        <td>
                            <input name="answer-1" type="radio">
                        </td>
                        <td>
                            <input name="answer-1" type="radio">
                        </td>
                    </tr>
                    <tr>
                        <td>Sữa dưỡng da</td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                    </tr>

                    <tr>
                        <td>Sữa dưỡng da</td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                    </tr>

                    <tr>
                        <td>Sữa dưỡng da</td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                        <td>
                            <input type="radio">
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="buttons">
                    <input style="margin-left: 0" type="button" class="btn" value="OK">
                    <a class="button-skip">Skip</a>
                </div>
            </div>

            <div class="question-box">
                <div class="question-text">
                    <h3>How do you do?</h3>
                </div>
                <div class="question-answer">
                    <ul class="radiolist enabled">
                        <li data-action="answer" data-answer="1" class="first">
                            <input id="answer-1" type="checkbox">
                            <label for="answer-1">This is my first time</label>
                        </li>
                        <li data-action="answer" data-answer="1">
                            <input id="answer-1" type="checkbox">
                            <label for="answer-1">This is my first time</label>
                        </li>
                        <li data-action="answer" data-answer="1">
                            <input id="answer-1" type="checkbox">
                            <label for="answer-1">This is my first time</label>
                        </li>
                    </ul>
                    <div class="buttons">
                        <input type="button" class="btn" value="OK">
                        <a class="button-skip">Skip</a>
                    </div>
                </div>
            </div>

            <div class="question-box">
                <div class="question-text">
                    <h3>How do you do?</h3>
                </div>
                <div class="question-answer">
                    <ul class="radiolist enabled">
                        <li data-action="answer" data-answer="1" class="first">
                            <span class="sprite radio"></span>
                            <span class="overlay"></span>
                            <span class="bar"></span>
                            <span class="result"></span> This is my first time
                        </li>
                        <li data-action="answer" data-answer="2" class="">
                            <span class="sprite radio"></span>
                            <span class="overlay"></span>
                            <span class="bar"></span>
                            <span class="result"></span> Daily
                        </li>
                        <li data-action="answer" data-answer="3" class="">
                            <span class="sprite radio"></span>
                            <span class="overlay"></span>
                            <span class="bar"></span>
                            <span class="result"></span> Weekly
                        </li>
                        <li data-action="answer" data-answer="4" class="">
                            <span class="sprite radio"></span>
                            <span class="overlay"></span>
                            <span class="bar"></span>
                            <span class="result"></span> Monthly
                        </li>
                        <li data-action="answer" data-answer="5" class="">
                            <span class="sprite radio"></span>
                            <span class="overlay"></span>
                            <span class="bar"></span>
                            <span class="result"></span> Less than once a month
                        </li>
                        <li class="skip" data-action="skip">
                            <span class="sprite radio"></span>
                            <span class="overlay"></span> Skip
                        </li>
                    </ul>
                </div>
            </div>-->
            <!--<pre>
                <?php
/*                    var_dump($question);
                */?>
            </pre>-->
            <?php
                for($i = 0; $i < sizeof($question); $i++){
                    $question_type = $question[$i]['question_type'];
                    switch($question_type){
                        case "1":{
                            $isAnswered = false;
                            $answered_id = 0;
                            $answered_time = "";
                            if(isset($user_survey)){
                                foreach($user_survey as $v){
                                    $qid = $v['qid'];
                                    if($qid == $question[$i]['qid']){
                                        $isAnswered = true;
                                        $answered_id = $v['answered_id'];
                                        $answered_time = $v['answered_time'];
                                    }
                                }
                            }
                            if($i == sizeof($question)-1){
                                echo '<div class="question-box answers" type="1" qid="'.$question[$i]['qid'].'">';
                            }else{
                                echo '<div class="question-box" type="1" qid="'.$question[$i]['qid'].'">';
                            }
                            ?>
                                <div class="question-text">
                                    <h3><?php echo $question[$i]['question_name']; ?></h3>
                                    <?php
                                        if(isset($user_survey)){
                                            echo '<p class="question-answered-time">Được khảo sát vào '.$answered_time.' </p>';
                                        }
                                    ?>
                                </div>
                                <div class="question-answer">
                                    <ul class="radiolist enabled">
                                    <?php
                                        $child_number = 0;
                                        foreach($question[$i]['children'] as $value) {
                                            $child_number++;
                                            if($isAnswered && $answered_id == $value['qid']){
                                                ?>
                                                    <li data-action="answer" asid="<?php echo $value['qid'];  ?>" onclick="answered(this);" data-answer="<?php echo $child_number; ?>" <?php if($child_number == 1){ echo 'class="first selected"'; }else{ echo 'class="selected"';} ?>>
                                                        <span class="sprite radio"></span>
                                                        <span class="overlay"></span>
                                                        <span class="bar" style="width: 100%"></span>
                                                        <span class="result"></span> <?php echo $value['question_name']; ?>
                                                    </li>
                                                <?php
                                            }else{
                                                ?>
                                                    <li data-action="answer" asid="<?php echo $value['qid'];  ?>" onclick="answered(this);" data-answer="<?php echo $child_number; ?>" <?php if($child_number == 1){ echo 'class="first"'; } ?>>
                                                        <span class="sprite radio"></span>
                                                        <span class="overlay"></span>
                                                        <span class="bar" style="width: 100%"></span>
                                                        <span class="result">30%</span> <?php echo $value['question_name']; ?>
                                                    </li>
                                                <?php
                                            }
                                        }
                                        ?>
                                        <li class="skip" onclick="skipAnswer(this);" data-action="skip">
                                            <span class="sprite radio"></span>
                                            <span class="overlay"></span> Bỏ qua
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <?php
                            break;
                        }
                        case "2":{
                            $isAnswered = false;
                            $isPosition = 0;
                            $answered_time = "";
                            if(isset($user_survey)){
                                $number = 0;
                                foreach($user_survey as $v){
                                    $qid = $v['qid'];
                                    if($qid == $question[$i]['qid']){
                                        $isAnswered = true;
                                        $answered_time = $user_survey[0]['answered_time'];
                                        $isPosition = $number;
                                    }
                                    $number++;
                                }
                            }

                            if($i == sizeof($question)-1){
                                echo '<div class="question-box answers" type="2" qid="'.$question[$i]['qid'].'">';
                            }else{
                                echo '<div class="question-box" type="2" qid="'.$question[$i]['qid'].'">';
                            }
                            ?>
                                <div class="question-text">
                                    <h3><?php echo $question[$i]['question_name']; ?></h3>
                                    <?php
                                        if(isset($user_survey)){
                                            echo '<p class="question-answered-time">Được khảo sát vào '.$answered_time.' </p>';
                                        }
                                    ?>
                                    <p class="question-answer-notice">Bạn chưa chọn câu trả lời.</p>
                                </div>
                                <div class="question-answer">
                                    <ul class="radiolist disabled enabled">
                                        <?php
                                            $child_number = 0;
                                            foreach($question[$i]['children'] as $value) {
                                                if($isAnswered){
                                                    $selected = false;
                                                    foreach($user_survey[$isPosition]['children'] as $v){
                                                        if($v['answered_id'] == $value['qid']){
                                                            $selected = true;
                                                        }
                                                    }
                                                    if($selected){
                                                        $child_number++;
                                                        ?>
                                                            <li data-action="answer" asid="<?php echo $value['qid'];  ?>" data-answer="<?php echo $child_number; ?>" <?php if($child_number == 1){ echo 'class="first"'; } ?>>
                                                                <input checked id="answer-<?php echo $value['qid']; ?>" type="checkbox" value="<?php echo $value['qid'];  ?>">
                                                                <label for="answer-<?php echo $value['qid']; ?>"><?php echo $value['question_name']; ?></label>
                                                            </li>
                                                        <?php
                                                    }else{
                                                        $child_number++;
                                                        ?>
                                                            <li data-action="answer" asid="<?php echo $value['qid'];  ?>" data-answer="<?php echo $child_number; ?>" <?php if($child_number == 1){ echo 'class="first"'; } ?>>
                                                                <input id="answer-<?php echo $value['qid']; ?>" type="checkbox" value="<?php echo $value['qid'];  ?>">
                                                                <label for="answer-<?php echo $value['qid']; ?>"><?php echo $value['question_name']; ?></label>
                                                            </li>
                                                        <?php
                                                    }
                                                }else{
                                                    $child_number++;
                                                    ?>
                                                        <li data-action="answer" asid="<?php echo $value['qid'];  ?>" data-answer="<?php echo $child_number; ?>" <?php if($child_number == 1){ echo 'class="first"'; } ?>>
                                                            <input id="answer-<?php echo $value['qid']; ?>" type="checkbox" value="<?php echo $value['qid'];  ?>">
                                                            <label for="answer-<?php echo $value['qid']; ?>"><?php echo $value['question_name']; ?></label>
                                                        </li>
                                                    <?php
                                                }

                                            }
                                        ?>
                                    </ul>
                                    <!--<div class="val-message error">Please enter your age</div>-->
                                    <div class="buttons">
                                        <input type="button" onclick="answered(this);" class="btn" value="Đồng ý">
                                        <a class="button-skip" onclick="skipAnswer(this);">Bỏ qua</a>
                                    </div>
                                </div>
                            </div>
                            <?php
                            break;
                        }
                        case "3":{
                            $isAnswered = false;
                            $isPosition = 0;
                            $answered_time = "";
                            if(isset($user_survey)){
                                $number = 0;
                                foreach($user_survey as $v){
                                    $qid = $v['qid'];
                                    if($qid == $question[$i]['qid']){
                                        $isAnswered = true;
                                        $answered_time = $user_survey[0]['answered_time'];
                                        $isPosition = $number;
                                    }
                                    $number++;
                                }
                            }
                            if($i == sizeof($question)-1){
                                 echo '<div class="question-box answers" type="3" qid="'.$question[$i]['qid'].'">';
                            }else{
                                echo '<div class="question-box" type="3" qid="'.$question[$i]['qid'].'">';
                            }
                            ?>
                                <h3><?php echo $question[$i]['question_name']; ?></h3>

                                <?php
                                    if(isset($user_survey)){
                                        echo '<p class="question-answered-time">Được khảo sát vào '.$answered_time.' </p>';
                                    }
                                ?>

                                <table class="answer-table">
                                    <tbody>
                                    <tr>
                                        <?php
                                            //Column
                                            echo '<th></th>';
                                            foreach($question[$i]['column'] as $c){
                                                echo '<th qid ="'.$c['qcid'].'">'.$c['question_child_name'].'</th>';
                                            }
                                        ?>
                                    </tr>
                                    <?php
                                        //Row
                                        $numberRow = 0;
                                        foreach($question[$i]['row'] as $r){
                                            $rowValue = 0;
                                            $columnValue = 0;
                                            if(isset($user_survey)){
                                                $rowValue = $user_survey[$i]['children'][$numberRow]['qid'];
                                                $columnValue = $user_survey[$i]['children'][$numberRow]['answered_id'];
                                            }
                                            $rowTableValue = $r['qid'];
                                            ?>
                                            <tr>
                                                <td qid="<?php echo $r['qid']; ?>"><?php echo $r['question_name']; ?></td>
                                                <?php
                                                    for($j=0; $j<sizeof($question[$i]['column']); $j++){
                                                        $columnTableValue = $question[$i]['column'][$j]['qcid'];
                                                        if($rowValue == $rowTableValue && $columnValue == $columnTableValue){
                                                            echo '<td><input checked name="answer-'.$r['qid'].'" type="radio"></td>';
                                                        }else{
                                                            echo '<td><input name="answer-'.$r['qid'].'" type="radio"></td>';
                                                        }
                                                    }
                                                ?>
                                            </tr>
                                            <?php
                                            $numberRow++;
                                        }
                                    ?>
                                    </tbody>
                                </table>
                                <div class="table-survey-button buttons">
                                    <a class="button-skip" onclick="skipAnswer(this);">Bỏ qua</a>
                                    <input style="margin-left: 0" onclick="answered(this);" type="button" class="btn" value="Đồng ý">
                                </div>
                            </div>
                            <?php
                            break;
                        }
                        default:{
                            break;
                        }
                    }
                }
            ?>

            <?php
                /*if($surveyed == "true"){
                    */?><!--
                        <div class="question-box answers">
                            <h1>Bạn đã làm bài khảo sát này. </h1>

                            <h3>Bài thăm dò ý kiến nhanh là những câu hỏi mang đến cho chúng tôi những thông tin có giá trị về sở thích của bạn.</h3>

                            <div class="buttons">
                                <input title="Nhấn tiếp tục để cập nhật khảo sát" style="position: absolute; right: 175px" onclick="answered(this);" type="button" class="btn" value="Tiếp tục">
                                <a style="position: absolute; right: 40px" class="button-skip" onclick="cancelSurvey(this);">Bỏ qua</a>
                            </div>
                        </div>
                    <?php
/*                }else{
                    */?>
                        <div class="question-box answers">
                            <h1>Mời bạn làm bài thăm dò ý kiến nhanh. </h1>

                            <h3>Bài thăm dò ý kiến nhanh là những câu hỏi mang đến cho chúng tôi những thông tin có giá trị về sở thích của bạn.</h3>

                            <div class="buttons">
                                <input style="position: absolute; right: 40px" onclick="answered(this);" type="button" class="btn" value="Đồng ý">
                            </div>
                        </div>
                    --><?php
/*                }*/

              /*  echo "<pre>";
                var_dump($user_survey);
                echo "</pre>";*/

            ?>
            <div style="height: 100px"></div>
        </div>
    </div>
</div>

<script>
    $(function(){
        //test
        /*$('.btn').click(function(){

            var box = $('.question-box');
            var index  = $(this).closest('.question-box').index();
            var top = 0;
            for(var i = 0; i< index - 1; i++){
                top += $(box.get(i)).height()+66;
            }
            top = top + 40 + (index-2)*10;
            $('.survey-content').animate({scrollTop: top}, 300);
        });*/
    });

    function answered(obj){
        obj = $(obj);
        var box = $('.question-box');
        var size = box.size();
        var index  = obj.closest('.question-box').index();
        if(!$(box.get(index)).hasClass('answered')){

            var type = obj.closest('.question-box').attr("type");
            var scid = $('.survey-wrapper').attr("scid");
            var qid = obj.closest('.question-box').attr("qid");
            switch (type){
                case "1":{
                    var asid = obj.attr("asid");
                    $.ajax({
                        type:"POST",
                        url:"account/surveyed",
                        data:{'scid': scid, 'qid': qid, 'type': type, 'asid': asid},
                        success:(function(data){
                            //Hiện thị thống kê sau khi trả lời
                            obj.parent().find('li').removeClass('selected');
                            obj.addClass('selected');

                            $(box.get(index)).addClass('answered');
                            $(box.get(index-1)).addClass('answers');
                            $('.survey-content').animate({scrollTop: 0}, 300);
                        })
                    });
                    break;
                }
                case "2":{
                    var answer = obj.closest('.question-box').find('.question-answer').find('li');
                    var answer_size = obj.closest('.question-box').find('.question-answer').find('li').size();
                    var ans = Array();
                    for(var i = 0; i < answer_size; i++){
                        if($(answer.get(i)).find('input').prop("checked")){
                            ans.push($(answer.get(i)).find('input').val());
                        }
                    }

                    if(ans.length == 0){
                        $('.question-answer-notice').show();
                        $('.survey-content').animate({scrollTop: 0}, 300);
                    }else{
                        $('.question-answer-notice').hide();
                        $.ajax({
                            type:"POST",
                            url:"account/surveyed",
                            data:{'scid': scid, 'qid': qid, 'type': type, 'ansArr': ans},
                            success:(function(data){
                                //Hiện thị thống kê sau khi trả lời
                                $(box.get(index)).addClass('answered');
                                $(box.get(index-1)).addClass('answers');
                                $('.survey-content').animate({scrollTop: 0}, 300);
                            })
                        });
                    }
                    break;
                }
                case "3":{
                    answer = obj.closest('.question-box').find('.answer-table');
                    var arrTable = Array();
                    var j = 0;
                    answer.find('tr').each(function(){
                        var row = $(this).find('td:first').attr('qid');
                        var checked = false;
                        $(this).find('td').each(function(){
                            if($(this).find('input').prop("checked")){
                                checked = true;
                                //Tìm index của cột được chọn, rồi lấy giá trị của cột đó
                                var column = $(this).index();
                                var columnValue = $(answer.find('tr:first').find('th').get(column)).attr("qid");
                                var arr = Array();
                                arr.push(row);
                                arr.push(columnValue);
                                arrTable.push(arr);
                            }
                        });
                        if(!checked){
                            if($(this).index() > 0 && j==0){
                                $(this).effect('highlight', {color: 'rgb(255, 182, 193)'}, 500);
                                j++;
                            }
                        }
                    });
                    var tableSize = answer.find('tr').size();
                    if(arrTable.length == tableSize-1){
                        $.ajax({
                            type:"POST",
                            url:"account/surveyed",
                            data:{'scid': scid, 'qid': qid, 'type': type, 'ansArr': arrTable},
                            success:(function(data){
                                //Hiện thị thống kê (nếu được)

                            })
                        });
                        $(box.get(index)).addClass('answered');
                        $(box.get(index-1)).addClass('answers');
                        $('.survey-content').animate({scrollTop: 0}, 300);
                    }

                    break;
                }
                default :{
                    break;
                }

            }
            if(index == 0){
                closeSurvey(obj);
            }

        }
    }

    function skipAnswer(obj){
        obj = $(obj);
        var box = $('.question-box');
        var size = box.size();
        var index  = obj.closest('.question-box').index();
        if(!$(box.get(index)).hasClass('answered')){
            $(box.get(index)).addClass('answered');
            $(box.get(index-1)).addClass('answers');
            $('.survey-content').animate({scrollTop: 0}, 300);
        }
        if(index == 0){
            closeSurvey(obj);
        }
    }

    function cancelSurvey(obj){
        closeSurvey(obj);
    }

</script>
